<template>
	<view class="content">
		<!-- <image class="logo" src="/static/玄鸟.svg" v-show="logoShow"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <button type="default" @click="handle()">
      {{ btnTexts[Number(logoShow)] }}
    </button> -->
		<view style="height: 10px"></view>
		<today :aday="dateTime"></today>
		<OneWords></OneWords>
		<div class="tools">
			<view>
				<uni-datetime-picker v-model="single"><button class="zeri">择日</button></uni-datetime-picker>
			</view>
			<view>
				<button type="default" @click="gotoWuRi()">戊日查看</button>
			</view>
			<view><button @click="gotoTimer()">健身计时</button></view>
			<view>
				<button @click="gotoGua()">易经查询</button>
			</view>
			<view>
				<button @click="gotoCounter()">提肛计次</button>
			</view>
		</div>
	</view>
</template>

<script>
	import today from '../../coms/today.vue'
	import OneWords from '../../coms/OneWords.vue'
	const {
		Tao,
		Lunar,
		LunarUtil
	} = require('lunar-javascript')

	import {
		gethhmm,
		日历
	} from '../../utils/index.js'
	export default {
		data() {
			return {
				title: '天命玄鸟',
				logoShow: false,
				btnTexts: {
					1: '已生',
					0: '将而'
				},
				single: null,
				dateTime: new Date()
			}
		},
		onLoad() {},
		components: {
			today,
			OneWords
		},
		watch: {
			single(v1, v2) {
				// console.log(v1, v2)
				this.dateTime = new Date(this.single)
			}
		},
		methods: {
			test() {
				let li = new 日历(new Date())
			},
			handle() {
				this.logoShow = !this.logoShow
				this.btnText = this.btnTexts[Number(this.logoShow)]
			},
			gotoWuRi() {
				uni.navigateTo({
					url: '/pages/WuRi/WuRi'
				})
			},
			gotoTimer() {
				uni.navigateTo({
					url: '/pages/Timer/Timer'
				})
			},
			gotoGua() {
				uni.navigateTo({
					url: '/pages/Gua/Gua'
				})
			},
			gotoCounter() {
				uni.navigateTo({
					url: '/pages/Counter/Counter'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-left: 1rem;
		padding-right: 1rem;
		// background-color: rgb(236, 237, 239);
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.tools {
		width: 90%;
		margin: 10px;
		height: 110px;
		display: flex;
		justify-content: space-evenly;
		align-items: flex-start;
		flex-wrap: wrap;

		.zeri {}
	}
</style>
